<template>
	<view class="mainbgc" v-if="pageshow">
		<view class="content">
			<view class="centers">
				<view class="flexbetween flex_wrap">
					<view class="flexleft">
						<view class="image_ya">
							<image :src="dataAll.user.avatar_text" mode=""></image>
						</view>
						<view class="center_zi ">
							<view class="word_hei">{{dataAll.user.nickname}}</view>
							<view class="hui time">{{dataAll.createtime_text}}</view>
						</view>
					</view>
					<view class="flexleft">
						<view class="province_jiangsu">{{dataAll.cityinfo}}</view>
					</view>
				</view>
				<view class="flexbetween TV">
					<view class="hei">{{dataAll.title}}</view>
					<view class="bluer">{{dataAll.xz}}</view>
				</view>
			</view>
			<!-- 招聘要求 -->
			<view class="nav">
				<view class="text_weight"  style="font-size: 32rpx;">职位要求</view>
				<!-- <view class="word_grey  zhiwie_zi">工作性质：{{dataAll.gzxz.name}}</view> -->
				<view class="text_weight margin_top">工作经验：{{dataAll.jy}}</view>
				<view class="text_weight margin_top">学历要求：{{dataAll.xl}}</view>
				<view class="text_weight margin_top">工作地区：{{dataAll.cityinfo}}</view>
				<view class="text_weight margin_top">公司福利：{{dataAll.zp_fl_name}}</view>
			</view>
			<!-- 职位描述 -->
			<view class="section">
				<view class="text_weight">职位描述</view>
				<view class="word_grey zhiwie_zi">{{dataAll.des}}</view>
			</view>
			<!-- 公司 -->
			<view class="header_center flexstart margin_top">
				<image :src="dataAll.user.avatar_text" mode="" class="header_che"  @click="previewimg(0,dataAll.user.avatar_text.split())"></image>
				<view class="header_right">
					<view class="header_henan">{{dataAll.user.shop_apply.shop_name}}</view>
					<view class="flexcenter header_three">
						<view class="header_VIP" v-if="dataAll.user.vip_status">VIP认证</view>
						<view class="header_gs" v-if="dataAll.user.qy_status==1">企业认证</view>
						<view class="header_gs" v-if="dataAll.user.qy_status==2">工商认证</view>
						<view class="header_pt" v-if="dataAll.user.platform_status==1">平台认证</view>
					</view>
					<view class="hui browse">浏览量{{dataAll.views}}</view>
				</view>
			</view>
			<!--  -->
			<!-- 公司信息 -->
			<view class="mainpadding ffffff margin_top">
				<view class="text_weight">公司信息</view>
				<view class="flexbetween">
					<view class="hui gongsi flex_wrap site">
						{{dataAll.user.shop_apply.cityinfo}}{{dataAll.user.shop_apply.address}}
						<text class="word_bluer">距您{{kmUnit(Number(dataAll.distance))}}</text>
					</view>
					<view class="locations" @click="openmap"></view>
				</view>
				<view class="http site">移动电话：{{dataAll.mobile || ""}}</view>
				<view class="http site">座机电话：{{dataAll.zj || ""}}</view>
				<view class="http site">电子邮箱：{{dataAll.email || ""}}</view>
			</view>
			<!-- 公司简历 -->
			<view class="mainpadding ffffff margin_top">
				<view class="text_weight">公司简介</view>
				<view class="http site">{{dataAll.gsjj || ""}}</view>
				<!-- 图片 -->
				<!-- <view class="flexleft margin_top flex_wrap">
					<view class="item_image_box flexcenter" v-for="(item,index) in dataAll.images_text" :key="item">
						<view class="item_image">
							<image :src="item" mode="" @click="previewimg(index,dataAll.images_text)"></image>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 公司官网-->
			<view class="mainpadding ffffff margin_top">
				<view class="guanwang">公司官网</view>
				<view class="http">{{dataAll.user.shop_apply.shop_url}}</view>
			</view>
			<!-- 职位推荐 -->
			<view class="flexcenter mainpadding">
				<image src="@/static/images/xiangqing_slices/left_blue.png" mode="" class="img_blue"></image>
				<view class="">职位推荐</view>
				<image src="@/static/images/xiangqing_slices/right_blue.png" mode="" class="img_blue"></image>
			</view>
			<!--  -->
			<view class="">
				<view class="center margin_top mainpadding" @click="zhiwie(item.id)" v-for="item in dataAll.reczw"
					:key="item.id">
					<view class="flexbetween flex_wrap">
						<view class="flexleft">
							<view class="image_ya">
								<image :src="item.user.avatar_text" mode=""></image>
							</view>
							<view class="center_zi ">
								<view class="word_hei">{{item.user.nickname}}</view>
								<view class="hui">{{item.createtime_text}}</view>
							</view>
						</view>
						<view class="flexleft">
							<view class="province_jiangsu">{{item.cityinfo}}</view>
						</view>
					</view>
					<!-- l类型 -->
					<view class="flexleft lx flex_wrap">
						<view class="leixing" v-for="ite in item.flags" :key="ite">{{ite}}</view>
					</view>
					<view class="flexbetween TV">
						<view class="hei">{{item.title}}</view>
						<view class="bluer">{{item.xz}}</view>
					</view>
					<view class="hui_zi">{{item.des}}</view>
					<!-- 图片 -->
					<view class="flexleft margin_top flex_wrap">
						<view class="item_image_box flexcenter" v-for="(ite,index) in item.images_text" :key="ite">
							<view class="item_image">
								<image :src="ite" mode="" @click.stop="previewimg(index,item.images_text)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- footer -->
		<view class="footer flexbetween">
			<view class="flexleft">
				<view class="" @click="shareadd">
					<button open-type="share" class="footer_stars">
						<view class="share"></view>
						<view class=" share_zi">分享</view>
					</button>
				</view>
				<view class="footer_star" @click="collect">
					<!-- 已收藏 图片-->
					<view class="collect_star flexcolumn" v-show="dataAll.is_collect"></view>
					<view class="star flexcolumn " v-show="!dataAll.is_collect"></view>
					<view class="collect">收藏</view>
				</view>
			</view>
			<view class="flexleft footer_right" >
				<view class="phones margin_right1" @click="phone(dataAll)">拨打电话</view>
				<view class="phones1" @click="toudijl">投递简历</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				is_login: true,
				pageshow: false
			}
		},
		onLoad(options) {
			this.listid = options.id
			console.log(this.listid,"咧白哦id")
			this.getdetail()
		},
		onShow() {
			let _this = this
			if (!httpRequest.checkIsLogin()) {
				_this.is_login = false
			}
		},
		methods: {
			previewimg(index, arr) {
				let i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			zhiwie(id) {
				uni.navigateTo({
					url: '/pages/index/zhiwiexiangqing?id=' + id
				})
			},
			shareadd() {
				httpRequest.request('/api/zp/addZpShareNum', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {})
			},
			onShareAppMessage() {
				return {
					title: this.dataAll.title,
					path: "pages/index/zhiweixiangqing?id=" + this.listid + "&invite_code=" + uni.getStorageSync(
						"invite_code"),
				}
			},
			collect() {
				httpRequest.request('/api/zp/addZpCollect', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getdetail()
					}
				})
			},
			phone(dataAll) {
				let p = dataAll.mobile?dataAll.mobile:dataAll.zj?dataAll.zj:""
				if(!p){
					httpRequest.toast("电话号码非法，无法拨打")
					return false
				}
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
			toudijl(){
				httpRequest.request('/api/zp/sendUserJl', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if(res.code=='-1'){
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/mypage/wodejl"
							})
						},500)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getdetail() {
				httpRequest.request('/api/zp/detail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.pageshow = true
					if (res.code == 1) {
						this.dataAll = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			openmap() {
				uni.openLocation({
					latitude: Number(this.dataAll.user.shop_apply.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(this.dataAll.user.shop_apply.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: this.dataAll.user.shop_apply.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: this.dataAll.user.shop_apply.cityinfo + this.dataAll.user.shop_apply
					.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image_box {
		width: 25%;
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.mainbgc {
		padding-bottom: 200rpx;
	}

	.content {
		padding: 30rpx 24rpx;
	}

	.lx {
		padding-top: 30rpx;
	}

	.bluer {
		font-size: 28rpx;
		font-weight: 500;
		color: #228DFF;
	}

	.site {
		padding-top: 30rpx;
	}

	.worde_grey {
		padding-bottom: 10rpx;
	}

	.centers {
		background-color: #fff;
		padding: 30rpx 30rpx;
	}

	.section {
		background: #FFFFFF;
		border-radius: 16px 16px 16px 16px;
		margin-top: 30rpx;
		padding: 30rpx 28rpx;
	}

	.nav {
		background: #FFFFFF;
		border-radius: 16px 16px 16px 16px;
		margin-top: 5rpx;
		padding: 30rpx 28rpx;
	}

	.center_zi {
		padding: 0rpx 20rpx;
	}

	.hei {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.hui_zi {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-top: 30rpx;
		//超出两行省略号
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ya {
		padding: 34rpx 19rpx 0rpx 30rpx;
	}

	.footer {
		padding: 72rpx 30rpx;
	}

	.header_center {
		padding: 30rpx 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.header_right {
		padding-left: 19rpx;

		.header_henan {
			font-size: 30rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.header_three {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;

			.header_VIP {
				color: #FFA500;
				padding: 4rpx 16rpx 4rpx 16rpx;
				background: RGBA(255, 246, 230, 1);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				margin-right: 30rpx;
			}

			.header_gs {
				color: #228DFF;
				padding: 4rpx 16rpx 4rpx 16rpx;
				background: RGBA(233, 244, 255, 1);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				margin-right: 30rpx;
			}

			.header_pt {
				color: #FD463E;
				padding: 4rpx 16rpx 4rpx 16rpx;
				background: RGBA(255, 237, 236, 1);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				margin-right: 30rpx;
			}
		}
	}

	.time {
		padding-top: 10rpx;
	}

	.header_che {
		width: 132rpx;
		height: 132rpx;
		background-size: 100% 100%;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.gongsi {
		width: 500rpx;
	}

	.word_bluer {
		margin-left: 20rpx;

	}

	.beijing {
		margin-left: 15rpx;
	}

	.http {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-top: 30rpx;
	}

	.guanwang {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.img_blue {
		width: 17rpx;
		height: 20rpx;
		padding-right: 35rpx;
		padding-left: 35rpx;
	}

	.leixing {
		background: RGBA(233, 244, 255, 1);
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 4rpx 29rpx 4rpx 39rpx;
		margin-right: 20rpx;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.footer_star {
		padding-left: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.footer {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		padding: 30rpx 46rpx;
		padding-bottom: 57rpx;
	}

	.zhiwie_zi {
		padding-top: 30rpx;
	}

	.phones {
		background: #228DFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 21rpx 20rpx 21rpx 20rpx;
	}
	.phones1{
		background: #fff;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		border: 1rpx solid #228DFF;
		color: #228DFF;
		padding: 21rpx 20rpx 21rpx 20rpx;
	}

	.TV {
		padding: 30rpx 0rpx 0rpx 0rpx;
	}

	.browse {
		padding-top: 15rpx;
	}

	.share_zi {
		padding-top: 13rpx;
	}

	.collect {
		padding-top: 13rpx;
	}
</style>